<template>
    <div class="C2C">
        <yd-pullrefresh :callback="loadData" ref="pullrefreshDemo">
            <price-trend></price-trend>
            <div style="margin-top: 0.2rem">
                <Tabs :items="tabs" :default="0" @tabClick="tabClick"></Tabs>
            </div>
            <div class="list">
                <div></div>
                <list-item v-for="(item, index) in 4" class="listItem" :key="index" :type="listType" @click="itemDidClick(index)"></list-item>
            </div>
            <load-more
                    :canLoad="loadMoreState"
                    @load="loadData"/>
        </yd-pullrefresh>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import {NAV_BAR_INFO} from "@/store/MutationTypes";
    import PriceTrend from "../c2c/component/PriceTrend.vue";
    import ListItem from "../c2c/component/ListItem.vue";
    import LoadMore from "../../components/LoadMore.vue";
    import Tabs from "../../components/Tabs.vue";

    @Component({
        components: {
            Tabs,
            LoadMore,
            ListItem,
            PriceTrend
        },
    })
    export default class C2C extends Vue {
        private logo: string = require('../../assets/logo.png');
        private loadMoreState: boolean = true;
        private listType: number = 0;
        private tabs: any[] = [
            { title: '我要买', key: 0 },
            { title: '我要卖', key: 1 }
        ];
        private created() {
            let __this = this;
            this.$store.dispatch(NAV_BAR_INFO, {
                // leftItem: { name: '', icon: 'icon-arrow-left', click: () => {
                //         __this.$common.toast({
                //             mes: '回退'
                //         })
                //     }},
                rightItem: { name: '挂单', icon: undefined , click: () => {
                    __this.$router.push('/publish-order');
                    }}
            })
        }
        private mounted(): void {
            this.$common.scrollToTop();
            this.loadData();
        }
        private loadData(number: number = 0): void {
            if (number === 0) { // 刷新
                // @ts-ignore
                LoadMore.resize()
            }
            let __this = this;
            setTimeout(() => {
                __this.$common.stopPullDownRefresh(__this, 'pullrefreshDemo');
            }, 1000)
        }
        private tabClick(item: any): void {
            this.listType = item.key;
        }
        private itemDidClick(index: number): void {
            if (this.listType === 0) {
                this.$router.push('/start-buy-order');
            } else if (this.listType === 1) {
                this.$router.push('/start-sell-order')
            }
        }
    }
</script>
<style scoped lang="less">
    .C2C {
        position: relative;
        padding: 0.2rem  0.3rem 0 0.3rem;
        & .list {
            & .listItem {

            }
        }
    }
</style>
